<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>{% block title %}{{ application_name }}{% endblock %}</title>
    <style type="text/css">
      .good {background-color: white;}
      .bad  {background-color: red;}
      input {text-align: right; font-size:20px; width:150px}
      .mean {font-weight:bold;}
      .mean td {background-color:#F0F8FF;}
      .mean td input {background-color:#F0F8FF;border:none;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function create_element(element_name, attributes, value){
        function indexOf(array, obj){
          for(var i=0; i<array.length; i++){
            if(array[i]==obj){
              return i;
            }
          }
          return -1;
        }
        
        function set_attributes(attributes, element){
          // keywords that need to be defined on the attribute
          single_attributes=['readOnly', 'disabled'];
          // Add Attributes
          /*
          if(attributes != undefined){
            for (var i in attributes){
              if (indexOf(single_attributes, i) >= 0){
                element[i] = attributes[i];
              }
              else
                element.setAttribute(i,attributes[i]);
            }
          }*/
        }
        var element = document.createElement(element_name);

        set_attributes(attributes, element);

        // Add innerHTML value
        if(value != undefined){
          element.innerHTML = value;
        }

        return element;
      }

      function populate(){
        create_experiments_div();
        show_performance();
      }
      PERF = {'startTime':null,'endTime':null,'experiments':[],'headers':[],'observations':[],'replicates':[],'data':[]};
      function create_experiments_div(){
        PERF.startTime = new Date();
        var div = create_element('div',{'id': 'experiments'});
        document.body.appendChild(div);
        for (var i=0;i<12; i++){
          var e_time_start = new Date();
          var experiment_id = "EXPERIMENTS["+i+"]"
          div.appendChild(create_element('h2',{},'EXPERIMENT'));
          var table = create_element('table');
          div.appendChild(table);
          
          var tr = create_element('tr');
          
          table.appendChild(tr);
          
          var h_time_start = new Date();
          for (var h=0;h<30;h++){
            tr.appendChild(create_element('th',{},h));
          }
          var h_time_stop = new Date();

          PERF.headers.push(h_time_stop.getTime() - h_time_start.getTime());
          
          
          var o_time_start = new Date();
          for (var o=0;o<14;o++){
            var r_time_start = new Date();
            
            for (var r=0;r<6;r++){
              var tro = create_element('tr',{'class':'data'});
              table.appendChild(tro);
              var otd = create_element('td',{},o);
              tro.appendChild(otd);
              var rtd = create_element('td',{},r);
              tro.appendChild(rtd);
              var d_time_start = new Date();
              for (var d=0;d<30;d++){
                tro.appendChild(create_element('td',{},d));
              }
              var d_time_stop = new Date();
              PERF.data.push(d_time_stop.getTime() - d_time_start.getTime());
              
            }
            var r_time_stop = new Date();
            PERF.replicates.push(r_time_stop.getTime() - r_time_start.getTime());  
          }
          var o_time_stop = new Date();
          PERF.observations.push(o_time_stop.getTime() - o_time_start.getTime());
          e_time_stop = new Date();
          PERF.experiments.push(e_time_stop.getTime() - e_time_start.getTime());
        }
        PERF.endTime = new Date();
    }
    
    function show_performance(){
      var perf_div = document.getElementById('performance');
      var h1 = create_element('h1',{},'Performance was '+ (PERF.endTime.getTime() - PERF.startTime.getTime()) + 'ms');
      perf_div.appendChild(h1);
      var ul = create_element('ul');
      for (i in PERF){
        var li = create_element('li',{},i+":"+PERF[i].toString());
        ul.appendChild(li);
      }
      perf_div.appendChild(ul);
    }

    
    //if (document.addEventListener)
    //  document.addEventListener("DOMContentLoaded", populate, false);
    
    //]]>
    
    </script>
    {% block head %}{% endblock %}
  </head>
  <body onload="populate()">
    <div id="performance"></div>
    <div id="body">{% block body %}{% endblock %}</div>
  </body>
</html>
